import React, { useState } from 'react';
import { Card, Radio, Table, Tag, Button, Row, Col, Typography, Space, Tooltip } from 'antd';
import { AppstoreOutlined, BarsOutlined, LinkOutlined } from '@ant-design/icons';

const { Title, Paragraph } = Typography;

/**
 * 个人项目页面
 * 以表格或网格视图展示个人项目列表。
 */
const ProjectsPage = () => {
  const [viewMode, setViewMode] = useState('grid');
  
  const projectsData = [
    { 
      id: 1, 
      name: "个人博客网站", 
      status: "已完成", 
      description: "一个使用 React 和 Ant Design 构建的响应式个人网站，也就是您现在看到的这个。",
      tech: ["React", "Ant Design", "Tailwind CSS"],
      liveLink: null,
    },
    { 
      id: 2, 
      name: "天气查询应用", 
      status: "进行中", 
      description: "一个可以查询全球城市实时天气和预报的小应用，正在尝试集成地图功能。",
      tech: ["Vue", "axios", "OpenWeatherMap API"],
      liveLink: "https://example.com/weather-app-demo",
    },
    { 
      id: 3, 
      name: "命令行工具", 
      status: "已完成", 
      description: "一个用于快速搭建项目脚手架的Node.js命令行工具。",
      tech: ["Node.js", "Commander.js"],
      liveLink: null,
    },
  ];

  const columns = [
    { title: '项目名称', dataIndex: 'name', key: 'name', width: '20%' },
    { 
      title: '描述', 
      dataIndex: 'description', 
      key: 'description', 
      width: '40%',
      render: (text) => <Paragraph ellipsis={{ rows: 2, expandable: true, symbol: '更多' }}>{text}</Paragraph>
    },
    { 
      title: '技术栈', 
      dataIndex: 'tech', 
      key: 'tech',
      render: (techs) => (
        <>
          {techs.map(tag => <Tag key={tag} color="blue">{tag}</Tag>)}
        </>
      )
    },
    { 
      title: '状态', 
      dataIndex: 'status', 
      key: 'status',
      render: status => (
        <Tag color={status === '已完成' ? 'success' : 'processing'}>
          {status}
        </Tag>
      )
    },
    {
      title: '操作',
      key: 'action',
      render: (_, record) => (
        <Space>
          {record.liveLink && (
            <Tooltip title="访问线上">
              <Button type="text" icon={<LinkOutlined />} href={record.liveLink} target="_blank" />
            </Tooltip>
          )}
        </Space>
      ),
    },
  ];

  return (
    <div className="bg-gray-50 py-8 px-4 sm:px-6 lg:px-8" style={{marginBottom:'12%'}}>
      <div className="container mx-auto">
        <Title level={2} style={{ textAlign: 'center', marginBottom: '16px' }}>
          个人项目
        </Title>
        <Paragraph style={{ textAlign: 'center', marginBottom: '32px', maxWidth: '600px', margin: '0 auto 32px' }}>
          这里是我利用业余时间开发和学习的一些项目，记录了我的成长轨迹。
        </Paragraph>
        
        <Card>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '16px' }}>
            <Title level={4} style={{ margin: 0 }}>项目列表</Title>
            <Radio.Group value={viewMode} onChange={(e) => setViewMode(e.target.value)}>
              <Radio.Button value="grid"><AppstoreOutlined /> 网格</Radio.Button>
              <Radio.Button value="table"><BarsOutlined /> 表格</Radio.Button>
            </Radio.Group>
          </div>

          {viewMode === 'table' ? (
            <Table columns={columns} dataSource={projectsData} rowKey="id" />
          ) : (
            <Row gutter={[16, 16]}>
              {projectsData.map(item => (
                <Col xs={24} sm={12} md={8} key={item.id}>
                  <Card 
                    hoverable
                    title={item.name} 
                    style={{ height: '100%' }}
                  >
                    <Paragraph ellipsis={{ rows: 3 }}>{item.description}</Paragraph>
                    <div>
                      {item.tech.map(tag => <Tag key={tag} color="geekblue">{tag}</Tag>)}
                    </div>
                  </Card>
                </Col>
              ))}
            </Row>
          )}
        </Card>
      </div>
    </div>
  );
};

export default ProjectsPage; 